<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>

	<body>
		<div id="app">

			用户编号<input type="text" v-model="user.id" disabled name="id" id="id" value="" />
			用户姓名<input type="text" v-model="user.name" name="name" id="name" value="" /><br>

			用户年龄<input type="text"  v-model="user.age" name="age" id="age" value="" />
			用户性别<input type="text" v-model="user.sex"  name="sex" id="sex" value="" />
			<button type="button" @click="updateuser">更新</button>
			<table border="1px" >
				<th colspan="5">
					页面查询
				</th>
				<tr>
					<td>id</td>
					<td>name</td>
					<td>age</td>
					<td>sex</td>
					<td>操作</td>
				</tr>
				<tr v-for="user in userList">
					<td>{{user.id}}</td>
					<td>{{user.name}}</td>
					<td>{{user.age}}</td>
					<td>{{user.sex}}</td>
					<td><button @click="autowired(user)" type="button">更新</button> <button type="button" @click="deleteuser(user)">删除</button></td>
				</tr>
				
			</table>
		</div>
	</body>
</html>
<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const v=new Vue({
		el: app,
		data: {
			userList: [],
			user:{
				id:'',
				name:'',
				age:'',
				sex:''
			}
		},
		
		
		methods: {
			async aaa() {
				const {
					data: result
				} = await axios.get("user/findAll");
				console.log(result)
				this.userList=result;
			},
			async updateuser() {
				const {
					data: result
				} = await axios.put("user/update",this.user);
				
			}
			,
			autowired(a){
					this.user=a;
			},
			async deleteuser(a){
				let id=a.id;
				let {data: result}= await axios.delete("user/delete/"+id)
				this.aaa()
			}
		},
		mounted() {
			axios.defaults.baseURL = "http://localhost:8080/"
			this.aaa();
		}
	})


	$(function() {





	})
</script>
